<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ed30ba825d2c0a27f9c9867c6376e02.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 6S',
    tname: '14.2mm超大动圈单元',
    sname: '199元起'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405161349_af5d2bb2e50bf45ff23d766e49da6cc5.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 6 活力版',
    tname: '14.2mm超大动圈',
    sname: '99元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404091941_350d7e8fb99f243754861b986168c187.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 开放式耳机',
    tname: '舒适稳固佩戴|超线性发声单元',
    sname: '699元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311292123_5f019eb3ce2987e60596f7a54630e44c.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 5 pro',
    tname: '同轴双单元 旗舰音质',
    sname: '379元起',
    delname: '399元'
  },
  {
    id: '5',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309211159_17fe0c43d4e970c047f2a69b73e15459.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 5',
    tname: '46dB深度降噪|12.4mm镀钛动圈',
    sname: '179元起',
    delname: '199元'
  },
  {
    id: '6',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111200_c1016839eae2c1f5bb79d5afde498e81.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Buds 4 Pro',
    tname: '18dB智能动态降噪|骨声纹通话降噪',
    sname: '799元起',
    delname: '1099元'
  },
  {
    id: '7',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241526_03b4bf93894a1297a7f1c74d46446fac.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 4 Pro',
    tname: '43dB 宽频降噪',
    sname: '289元',
    delname: '399元'
  },
  {
    id: '8',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202306102210_23dba6609bd84ca6a776ee4fb49fbb04.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi Buds 4',
    sname: '89元'
  }
])
const List = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202312081723_8c6876edb9fd120f765149945f77a4f1.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: '小米手环8 Pro 原神定制版',
    tname: '达达利亚主题定制手环',
    sname: '549元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311292146_8c5d78b2a31eeea568ef97352879aa1d.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Watch 4',
    tname: '1.97英寸AMOLED大屏',
    sname: '499元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310261939_ad76b79c71d77843da233ec1e94ccff8.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Watch S3',
    tname: '百变表圈|小米澎湃OS',
    sname: '779元起',
    delname: '799元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310262032_d6242148bfa088bfb75dfadf38a14a63.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: '小米腕部心电血压记录仪',
    tname: '血压测量|心电采集',
    sname: '1999元'
  },
  {
    id: '5',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308141734_05a676c7c7649f9dbf50373e609304f4.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: '小米手环 8 Pro',
    tname: '1.74mmAMOLED炫彩大屏',
    sname: '399元起'
  },
  {
    id: '6',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202304181447_fff5c19e16988b91042cfddba800fc19.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: '小米手环8 NFC版',
    tname: '多样快拆时尚腕带|跑步豆模式',
    sname: '249元',
    delname: '299元'
  },
  {
    id: '7',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202304181447_fff5c19e16988b91042cfddba800fc19.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: '小米手环8',
    tname: '多样快拆时尚腕带|跑步豆模式',
    sname: '199元',
    delname: '249元'
  },
  {
    id: '8',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011906_e7f02b803d3da16ec56a611e790243ba.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: '小米手环7 Pro',
    sname: '239元'
  }
])
const formdata = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ed30ba825d2c0a27f9c9867c6376e02.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 6S',
    tname: '14.2mm超大动圈单元',
    sname: '199元起'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405161349_af5d2bb2e50bf45ff23d766e49da6cc5.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 6 活力版',
    tname: '14.2mm超大动圈',
    sname: '99元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404091941_350d7e8fb99f243754861b986168c187.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 开放式耳机',
    tname: '舒适稳固佩戴|超线性发声单元',
    sname: '699元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311292123_5f019eb3ce2987e60596f7a54630e44c.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 5 pro',
    tname: '同轴双单元 旗舰音质',
    sname: '379元起',
    delname: '399元'
  },
  {
    id: '5',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309211159_17fe0c43d4e970c047f2a69b73e15459.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 5',
    tname: '46dB深度降噪|12.4mm镀钛动圈',
    sname: '179元起',
    delname: '199元'
  },
  {
    id: '6',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111200_c1016839eae2c1f5bb79d5afde498e81.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Buds 4 Pro',
    tname: '18dB智能动态降噪|骨声纹通话降噪',
    sname: '799元起',
    delname: '1099元'
  },
  {
    id: '7',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241526_03b4bf93894a1297a7f1c74d46446fac.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Buds 4 Pro',
    tname: '43dB 宽频降噪',
    sname: '289元',
    delname: '399元'
  },
  {
    id: '8',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202306102210_23dba6609bd84ca6a776ee4fb49fbb04.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi Buds 4',
    sname: '89元'
  }
])
const chuandai = () => {
  data.value = List.value
}
const erji = () => {
  data.value = formdata.value
}
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h1>智能穿戴</h1>
        <h1 style="text-align: center" class="more">
          <span class="erji" @click="erji">耳机</span>
          <div>&nbsp;|&nbsp;</div>
          <span class="chuandai" @click="chuandai">穿戴</span>
        </h1>
      </el-header>
      <el-container>
        <el-aside class="leftimg" width="234px">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d06749930da27e8e8248cc69fced088f.png?thumb=1&w=234&h=614&f=webp&q=90"
          />
        </el-aside>
        <el-main>
          <div class="container">
            <div
              class="item"
              v-for="item in data"
              :key="item.id"
              :style="{ height: item.id === 8 ? '143px' : '305px' }"
            >
              <img :src="item.src" class="image" style="width: 200px" />
              <div class="text">
                <p class="one">{{ item.oname }}</p>
                <p class="tow">{{ item.tname }}</p>
                <p class="seer">
                  {{ item.sname }}&nbsp;
                  <del style="color: #b0b0b0">{{ item.delname }}</del>
                </p>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped lang="scss">
.common-layout {
  overflow: hidden;
  width: 1500px;
  height: 725px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .erji {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .chuandai {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
</style>
